<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>小耀page</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="css/login.css">

		<style>
			.layui-form-item .layui-input-block {
				display: flex;
				align-items: center;
			}

			.layui-form-item .layui-input-block .layui-btn {
				margin-left: 10px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<form class="layui-form container " action=""
			style="margin-left: 650px; margin-top: 150px; background-color: aliceblue; width: 500px;height: 400px;">
			<div class="layui-form-item">

			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">账户</label>
				<div class="layui-input-block">
					<input type="text" name="username" lay-verify="required" placeholder="请输入账户" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱验证码</label>
				<div class="layui-input-block">
					<input type="text" name="emailCode" lay-verify="required" placeholder="请输入邮箱验证码" autocomplete="off" style="width: 180px;"
						class="layui-input">
					<button type="button" class="layui-btn layui-btn-sm" id="getEmailCode"
						style="width: 100px;">获取验证码</button>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="register">注册</button>
				</div>
			</div>
		</form>


	</body>

	
	<script src="layui/layui.js"></script>
	
	<script>
		layui.use(['form', 'upload', 'layer'], function() {
					var form = layui.form;
					var upload = layui.upload;
					var layer = layui.layer;
					var $   = layui.$;

					// 用户头像上传
					upload.render({
						elem: '.layui-upload-file',
						url: '上传头像的后端接口地址',
						done: function(res) {
							// 上传成功的回调函数
							console.log(res);
						}
					});

					// 获取邮箱验证码
					document.getElementById('getEmailCode').addEventListener('click', function() {
							//随机生成6个数字组成的验证码
							var code = '';
							var digits = '0123456789';
							for (var i = 0; i < 6; i++) {
								var index = Math.floor(Math.random() * digits.length);
								code += digits.charAt(index);
								
								}
								var email = document.getElementsByName('emailCode')[0].value;
								console.log(code)
								console.log(email)
								// 使用 resend API发送代发验证码
								$.get('http://localhost:8080/reg/verify',{code:code},function(res){
									console.log(res)
								})
								
								// 调用后端接口发送验证码
								// 代码略，可以使用 Ajax 或其他方式调用	

							
						});
					});
	</script>



</html>
